<template>
    <div class="student">
        <el-row :gutter="20">
            <!-- <el-button type="primary">
                <i class="el-icon-plus"></i> 添加学生
            </el-button> -->
            <el-col :span="5">
                <el-input
                    placeholder="输入学生姓名"
                    v-model="search.student_name"
                ></el-input>
            </el-col>

            <el-col :span="5">
                <el-select v-model="search.room_id" placeholder="请选择教室号">
                    <el-option
                        v-for="item in rooms"
                        :key="item.id"
                        :label="item.sn"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-col>

            <el-col :span="5">
                <el-select v-model="search.grade_id" placeholder="请选择班级名">
                    <el-option
                        v-for="item in grades"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-col>

            <el-col :span="9">
                <el-button type="primary" @click="query">搜索</el-button>
                <el-button type="primary" @click="reset">重置</el-button>
            </el-col>
        </el-row>

        <el-table :data="list" border style="margin-top: 15px">
            <el-table-column label="姓名" prop="student_name"></el-table-column>
            <el-table-column label="学号" prop="student_code"></el-table-column>
            <el-table-column label="班级" prop="grade_name"></el-table-column>
            <el-table-column label="教室" prop="room_name"></el-table-column>
            <el-table-column
                label="密码"
                prop="student_password"
            ></el-table-column>
            <el-table-column label="操作">
                <template>
                    <el-button size="mini" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <span class="add-btn" @click="dialogVisible = true">
            <i class="el-icon-plus"></i>
        </span>

        <el-dialog title="添加学生" :visible.sync="dialogVisible" width="50%">
            <el-input
                v-model="form.student_name"
                placeholder="学生姓名"
            ></el-input>

            <el-input
                v-model="form.student_password"
                placeholder="密码"
            ></el-input>

            <el-input v-model="form.student_code" placeholder="学号"></el-input>

            <el-select v-model="form.grade_id" placeholder="请选择班级名">
                <el-option
                    v-for="item in grades"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
            </el-select>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    created() {
        this.getList();
        this.getRoomList();
        this.getGradeList();
    },
    data() {
        return {
            list: [],
            rooms: [],
            grades: [],
            dialogVisible: false,
            search: {
                student_name: "",
                room_id: "",
                grade_id: "",
            },
            form: {
                student_name: "",
                student_password: "",
                student_code: "",
                grade_id: "",
            },
        };
    },
    methods: {
        async getList() {
            const res = await this.$http.get("/students");
            this.list = res.data.data;
        },
        async getRoomList() {
            const res = await this.$http.get("/rooms");
            // console.log(res.data);
            this.rooms = res.data.data;
        },
        async getGradeList() {
            const res = await this.$http.get("/grades");
            // console.log(res.data);
            this.grades = res.data.data;
        },
        async query() {
            console.log(this.search);
        },
        async save() {
            const res = await this.$http.post("/students", { ...this.form });
            console.log(res);
            if (res.data.code !== 201) {
                this.$message.error(res.data.message);
                return;
            }
            // 成功刷新列表
            this.getList();
            this.dialogVisible = false;
        },
        reset() {
            this.search = {
                student_name: "",
                room_id: "",
                grade_id: "",
            };
        },
    },
};
</script>

<style lang="less" scoped>
.student {
    min-height: 85vh;
    height: 100%;

    .add-btn {
        display: inline-block;
        width: 45px;
        height: 45px;
        background-color: #409eff;
        color: #fff;
        border-radius: 50%;
        line-height: 45px;
        text-align: center;
        position: fixed;
        left: 365px;
        bottom: 65px;
        cursor: pointer;
    }
}
</style>
